<template>
    <el-card shadow="never">
        <template #header>
            <div class="flex justify-between">
                <span class="text-sm">订单统计</span>
                <div>
                    <el-check-tag v-for="(item, index) in options" :key="index" :checked="current == item.value"
                        style="margin-right: 8px" @click="handleChoose(item.value)">{{ item.text }}</el-check-tag>
                </div>
            </div>
        </template>
        <div ref="el" id="chart" style="width: 100%; height: 300px"></div>
    </el-card>

</template>

<script setup>
    import { ref, onMounted, onBeforeUnmount } from 'vue'
    import { useResizeObserver } from '@vueuse/core'
    import * as echarts from 'echarts';
    import {
        getStatistics3
    } from '~/api/index.js'

    const current = ref("hour")
    const options = [{
        text: "近一个月内",
        value: "month"
    },
    {
        text: "近一周内",
        value: "week"
    },
    {
        text: "近24小时内",
        value: "hour"
    }
    ]

    const handleChoose = (type) => {
        current.value = type
        getData()
    }

    var myChart = null
    onMounted(() => {
        var chartDom = document.getElementById('chart');
        if (chartDom) {
            myChart = echarts.init(chartDom);
            getData()
        }
    })

    onBeforeUnmount(() => {
        if (myChart) echarts.dispose(myChart)
    })

    function getData() {
        let option = {
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [],
                    type: 'bar'
                }
            ]
        };

        myChart.showLoading()
        getStatistics3(current.value).then(res => {
            option.xAxis.data = res.x
            option.series[0].data = res.y
            myChart.setOption(option)
        }).finally(() => {
            myChart.hideLoading()
        })
    }

    const el = ref(null)
    useResizeObserver(el, (entries) => myChart.resize())
</script>

<style scoped></style>